<template>
  <div>
    <a-modal title="补缴" :visible="visible" @ok="handleOk" @cancel="handleCancel" centered :confirm-loading="confirmLoading">
      <a-form-model :model="form" :label-col="labelCol" :wrapper-col="wrapperCol">
        <a-form-model-item class="labelStyle" label="补缴类型">
          <a-radio-group name="radioGroup" @change="changeFn" :default-value="1">
            <a-radio :value="1">
              社保
            </a-radio>
            <a-radio :value="2">
              公积金
            </a-radio>
          </a-radio-group>
        </a-form-model-item>
        <slot name="policy"></slot>
        <a-form-model-item class="fullWidth" label="社保补缴月份" v-if="radioValChecked == 1">
          <a-range-picker @change="onChange" />
        </a-form-model-item>
        <p class="desc_p" style=" color: rgba(0, 0, 0, 0.45)" v-if="radioValChecked === 1">支持补缴险种类型：生育险、医疗险、养老保险、失业保险</p>
        <a-form-model-item label="公积金补缴月份" v-else>
          <a-range-picker @change="onChange1" />
        </a-form-model-item>
      </a-form-model>
    </a-modal>
  </div>
</template>
  
<script>
export default {
  name: 'modal',
  props: {
    modalShow: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      visible: this.modalShow,
      labelCol: { span: 4 },
      wrapperCol: { span: 14 },
      form: {
        name: ''
      },
      radioValChecked: 1,
      confirmLoading: false
    }
  },
  methods: {
    handleOk () {
      this.confirmLoading = true;
      setTimeout(() => {
        this.visible = false;
        this.confirmLoading = false
      }, 2000);
    },
    handleCancel () {
      this.visible = false;
    },
    changeFn (e) {
      this.radioValChecked = e.target.value;
    },
    onChange (dateString) {
      console.log(dateString)
    },
    onChange1 (dateString) {
      console.log(dateString)
    }
  }
}
</script>
  
<style scoped lang='less'>
.labelStyle {
  margin-bottom: 10px;
  /deep/.ant-form-item-label {
    text-align: left;
  }
}

.fullWidth {
  margin-bottom: 10px;
  /deep/.ant-form-item-label {
    width: 100%;
    text-align: left;
  }
}
</style>